<template>
  <div>
    <el-card class="box-card" style="text-align: center;margin: -15px auto;background: #f6f6f7;">
      <el-container>
        <el-col style="width: 1200px;margin: 0 auto;">
          <el-row style="float: left;">
            <el-image :src="require('@/assets/xxzx.jpg')" style="height: 70px;width: 280px;"></el-image>
            <el-image :src="require('@/assets/qrcode.png')" style="height: 70px;width: 70px;"></el-image>
          </el-row>
        </el-col>
        <el-col>
          <el-row>
            <el-carousel height="30px" :interval="2000" arrow="never" indicator-position="none">
              <el-carousel-item v-for="item in newList" :key="item.index">
                <el-link :href="item.detailUrl" :key="item.index" target="_blank" :underline="false" style="font-size: 16px;font-family: 'Microsoft YaHei'">
                  <label><span style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">
                    {{ item.newsNm }}
                  </span>
                  </label>
                  <label> <span style="color: #1a75ce"> &emsp;[{{ item.pubDate }}]</span></label>
                </el-link>
              </el-carousel-item>
            </el-carousel>
          </el-row>
        </el-col>

        <el-header>
          <el-row class="block-col-2">
            <el-col :span="3" style="visibility : hidden">1</el-col>
            <el-col :span="3">
              <el-dropdown>
                <span class="el-dropdown-link" style="color: #ffffff;font-size: 18px;border-radius: 0;font-weight: 500;">
                  首页<i class="el-icon-arrow-down el-icon--right" style="visibility: hidden;"></i>
                </span>
                <el-dropdown-menu></el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="3">
              <el-dropdown>
                <span class="el-dropdown-link" style="color: #ffffff;font-size: 18px;border-radius: 0;font-weight: 500;">
                  特色资源<i class="el-icon-arrow-down el-icon--right" style="visibility: hidden"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus">水循环遥感</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus">水雨情动态</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus-outline">水资源动态</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-check">水灾害统计</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-check">地下水动态</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-check">数据分析</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="3">
              <el-dropdown>
                <span class="el-dropdown-link" style="color: #ffffff;font-size: 18px;border-radius: 0;font-weight: 500;">
                  特色专题<i class="el-icon-arrow-down el-icon--right" style="visibility: hidden"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="3">
              <el-dropdown>
                <span class="el-dropdown-link" style="color: #ffffff;font-size: 18px;border-radius: 0;font-weight: 500;">
                  专业文献<i class="el-icon-arrow-down el-icon--right" style="visibility: hidden"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="3">
              <el-dropdown>
                <span class="el-dropdown-link" style="color: #ffffff;font-size: 18px;border-radius: 0;font-weight: 500;">
                  热点聚焦<i class="el-icon-arrow-down el-icon--right" style="visibility: hidden"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-reading">水利资讯</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-coin">水利舆情</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="3">
              <el-dropdown>
                <span class="el-dropdown-link" style="color: #ffffff;font-size: 18px;border-radius: 0;font-weight: 500;">
                  关于我们<i class="el-icon-arrow-down el-icon--right" style="visibility: hidden"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="3" style="visibility : hidden">1</el-col>
          </el-row>
        </el-header>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import {carousel} from '@/api/news'
export default {
  data () {
    return {
      activeIndex1: '1',
      newList: {}
    }
  },
  created () {
    carousel().then(res => {
      if (res.data.status === 1003) {
        // this.$message.success('查询成功')
        this.newList = res.data.data
      } else {
        // this.$message.error('查询失败')
      }
    })
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #1a75ce;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  //background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
